<template>
  <div class="overview_site">
    <div class="page-title">{{$t('device.inverter.siteName')}}:<span>{{siteName}}</span></div>
    <el-row :gutter="24" class="row row1 clearfix">
        <el-col :lg="8" :md="24">
          <div class="box box-weather" :class="weatherObj.bg">
            <el-row :gutter="24">
              <el-col :span="14" class="weather-1">
                <div class="location" @click="showMap()">
                  <i class="iconfont icon-marker-site"></i>
                  {{weatherObj.city}}
                </div>
                <div class="info">
                  <div class="date marginbottom_10">{{weatherObj.date1}}</div>
                  <div class="weather clearfix">
                    <!-- <i class="icon pull-left"></i> -->
                    <img class="weather" :src="weatherObj.img1" width="60px">
                    <span>{{weatherObj.tmp1}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="10">
                <el-row class="sub info">
                  <div class="date">{{weatherObj.date2}}</div>
                  <div class="weather clearfix">
                    <!-- <i class="icon pull-left"></i> -->
                    <img class="weather" :src="weatherObj.img2" width="40px">
                    <span>{{weatherObj.tmp2}}</span>
                  </div>
                </el-row>
                <el-row class="sub info">
                  <div class="date">{{weatherObj.date3}}</div>
                  <div class="weather clearfix">
                    <!-- <i class="icon pull-left"></i> -->
                    <img class="weather" :src="weatherObj.img3" width="40px">
                    <span>{{weatherObj.tmp3}}</span>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :lg="16" :md="24">
          <div class="box box-countInfo">

            <el-row :gutter="24">
              <el-col :lg="12" :md="10" class="wrap">
                <div id="semicircleChart" class="semicircle">
                </div>
                <div class="semicircle-label inner">
                  <div class="value">
                    <span class="value">{{currentSize}}{{sizeUnit}}</span>
                  </div>
                  <div class="name">{{$t('index.powerNow')}}</div>
                </div>
                <div class="semicircle-label">
                  <span class="name">{{$t('vsite.capacity')}}</span>
                  <span class="value">
                    <span class="value">{{systemSize}}{{sizeUnit}}</span>
                  </span>
                </div>
              </el-col>
              <el-col :lg="12" :md="14" class="count">
                <div class="chart-wrap">
                  <div id="countChart" :style="{width: '200px', height: '200px'}"></div>
                  <ul>
                    <li>
                      <div class="value">{{inverterStatus[1]}}</div>
                      <div class="name status1">{{$t('inverterStatus.status1')}}</div>
                    </li>
                    <li>
                      <div class="value">{{inverterStatus[4]}}</div>
                      <div class="name status4">{{$t('inverterStatus.status4')}}</div>
                    </li>
                    <li>
                      <div class="value">{{inverterStatus[2]}}</div>
                      <div class="name status2">{{$t('inverterStatus.status2')}}</div>
                    </li>
                    <li>
                      <div class="value">{{inverterStatus[3]}}</div>
                      <div class="name status3">{{$t('inverterStatus.status3')}}</div>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="24" class="row">
        <el-col :lg="12" :md="24">
          <div class="box box-info clearfix">
            <div class="btn-refresh" @click="gridStatusChange">
              <i class="el-icon-refresh"></i>
              <span>{{grid_status=='1'?$t('site-on-grid'):$t('site-off-grid')}}</span>
            </div>
            <ul class="on" v-show="grid_status=='1'">
              <li class="day">
                <div class="name" :title="$t('overview.daily_generateElectricity')">{{$t('overview.daily_generateElectricity')}}</div>
                <i class="icon"></i>
                <div class="text">
                  <span class="value">{{yieldObj.todayYield | numberFloatFrm(true) | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.todayYield | numberFloatFrm(true) | getByIndex(1)}}</span>
                </div>
              </li>
              <li class="month">
                <div class="name" :title="$t('overview.month_generateElectricity')">{{$t('overview.month_generateElectricity')}}</div>
                <i class="icon"></i>
              <div class="text">
                  <span class="value">{{yieldObj.monthYield | numberFloatFrm(true) | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.monthYield | numberFloatFrm(true) | getByIndex(1)}}</span>
                </div>
              </li>
              <li class="year">
                <div class="name" :title="$t('overview.year_generateElectricity')">{{$t('overview.year_generateElectricity')}}</div>
                <i class="icon"></i>
                <div class="text">
                  <span class="value">{{yieldObj.yearYield | numberFloatFrm(true) | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.yearYield | numberFloatFrm(true) | getByIndex(1)}}</span>
                </div>
              </li>
              <li class="total">
                <div class="name" :title="$t('overview.total_generateElectricity')">{{$t('overview.total_generateElectricity')}}</div>
                <i class="icon"></i>
                <div class="text">
                  <span class="value">{{yieldObj.totalYield | numberFloatFrm(true) | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.totalYield | numberFloatFrm(true) | getByIndex(1)}}</span>
                </div>
              </li>
              <li class="money">
                <div class="name" :title="$t('overview.savingElectricity')">
                  {{$t('overview.savingElectricity')}}
                  <el-tooltip :content="$t('site.ElectricPrice')">
                    <span class="iconfont icon-tag color_text pointer hover" @click="()=>{$store.commit('setVisibleShow',true)}"></span>
                  </el-tooltip>
                </div>
                <i class="icon"></i>
                <div class="text">
                  <span class="unit">{{electricity.currency}}</span>
                  <span class="value">{{electricity.price | floatNum}}</span>
                </div>
              </li>
              <li class="co2">
                <div class="name" :title="$t('overview.CO2Reduction')">{{$t('overview.CO2Reduction')}}</div>
                <i class="icon"></i>
                <div class="text">
                  <span class="value">{{yieldObj.totalYield | convertUnit('weight') | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.totalYield | convertUnit('weight') | getByIndex(1)}}</span>
                </div>
              </li>
            </ul>
            <ul class="off" v-show="grid_status=='0'">
              <li class="day">
                <div class="name" :title="$t('overview.daily_generateElectricity')">{{$t('overview.daily_generateElectricity')}}</div>
                <i class="icon"></i>
                <div class="text">
                  <span class="value">{{yieldObj.todayEpsEnergy | numberFloatFrm(true) | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.todayEpsEnergy | numberFloatFrm(true) | getByIndex(1)}}</span>
                </div>
              </li>
              <li class="month">
                <div class="name" :title="$t('overview.month_generateElectricity')">{{$t('overview.month_generateElectricity')}}</div>
                <i class="icon"></i>
              <div class="text">
                  <span class="value">{{yieldObj.monthEpsEnergy | numberFloatFrm(true) | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.monthEpsEnergy | numberFloatFrm(true) | getByIndex(1)}}</span>
                </div>
              </li>
              <li class="year">
                <div class="name" :title="$t('overview.year_generateElectricity')">{{$t('overview.year_generateElectricity')}}</div>
                <i class="icon"></i>
                <div class="text">
                  <span class="value">{{yieldObj.yearEpsEnergy | numberFloatFrm(true) | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.yearEpsEnergy | numberFloatFrm(true) | getByIndex(1)}}</span>
                </div>
              </li>
              <li class="total">
                <div class="name" :title="$t('overview.total_generateElectricity')">{{$t('overview.total_generateElectricity')}}</div>
                <i class="icon"></i>
                <div class="text">
                  <span class="value">{{yieldObj.totalEpsEnergy | numberFloatFrm(true) | getByIndex(0)}}</span>
                  <span class="unit">{{yieldObj.totalEpsEnergy | numberFloatFrm(true) | getByIndex(1)}}</span>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :lg="12" :md="24">
          <div class="flex-item box-pv box">
            <div class="title">{{$t('overview.Information_Statistics')}}</div>
            <ul class="moduleInfo">
              <li id="pvShow">
                <div class="wrap">
                  <img src="../../assets/img/overview/pv.png"/>
                  
                  <ul class="float-list pv" v-if="Object.keys(pvList).length>0&&Object.keys(pvList).length<=10">
                    <li v-for="(item,key) in pvList" :key="key">
                      <div class="li-title">
                        {{key}}
                        <span :class="'status' + (item.inverterStatus||3)"></span>
                      </div>
                      <div class="value">
                        {{$t('index.solarPower')}}：
                        {{item.power | numberFloatFrm(false) | getByIndex(0)}}
                        {{item.power | numberFloatFrm(false) | getByIndex(1)}}
                      </div>
                    </li>
                  </ul>
                </div>
                <p>
                  <span>{{$t('index.solarPower')}}: </span>
                  <span class="value" id="pvPower">
                    {{pvPowerTotal | numberFloatFrm(false) | getByIndex(0)}}
                    {{pvPowerTotal | numberFloatFrm(false) | getByIndex(1)}}
                  </span>
                </p>
              </li>
              <li id="batteryShow">
                <div class="wrap">
                  <div class="battery">
                    <div class="bmsRer" :style="{width:averageSOC+'%'}"></div>
                    <i class="icon-battery" :class="batteryStateClass"></i>
                    <ul class="float-list" v-if="Object.keys(batteryList).length>0&&Object.keys(pvList).length<=10">
                      <template >
                        <li v-for="(item,key) in batteryList" :key="key" >
                          <div class="li-title">
                            {{key}}
                            <span :class="'status' + (item.inverterState||3)"></span>
                          </div>
                          <div class="value" v-if="item.bmsLost==1">
                            {{ $t('index.batteryPower')}}：NA
                          </div>
                          <div class="value" v-if="item.bmsLost==1">
                            SOC：NA
                          </div>

                          <div class="value" v-if="item.bmsLost!=1">
                            {{ $t('index.batteryPower')}}：
                            {{item.batteryPower | numberFloatFrm(false) | getByIndex(0)}}
                            {{item.batteryPower | numberFloatFrm(false) | getByIndex(1)}}
                          </div>
                          <div class="value" v-if="item.bmsLost!=1">
                            SOC：{{item.batteryCapacity | num2}}%
                            <i v-if="item.batteryPower>0" class="charge-status"></i>
                            <i v-if="item.batteryPower<0" class="charge-status discharge"></i>
                          </div>
                        </li>
                      </template>
                      <li v-if="Object.keys(batteryList).length==0" style="width:100px;text-align:center">{{$t('none')}}</li>
                    </ul>
                  </div>
                </div>
                <p>
                  <span>{{$t('averageSOC')}}: </span>
                  <span class="value" id="batteryPower">{{averageSOC | num2}}%</span>
                </p>
                <!-- <p>
                  <span>{{$t('overview.batteryPower')}}: </span>
                  <span class="value" id="batteryPower">{{Math.abs(pvBattery.batteryPower)}}</span>
                  <span class="unit">W</span>
                </p> -->
                <!-- <p>
                  <span>{{$t('report.reportAnalys.js_report_battery_status')}}: </span>
                  <span class="value batteryStatus" :class="batteryStatusColor" id="batteryStatus"></span>
                </p> -->
                
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="row">
        <el-col :lg="12" :md="24">
          <div class="flex-item box-sale-bar box">
            <div class="title">
              {{$t('overview.gridPower')}}
              <span class="time-group">
                <button :class="{disabled:powerChartDate==currentDate}" @click="setDateVal(-1)"><i class="el-icon-arrow-left el-icon--left"></i></button>
                <el-date-picker
                  v-model="powerChartDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  @change="initPowerChart()"
                  :clearable='false'
                  :picker-options="pickerOptions"
                  size="mini">
                </el-date-picker>
                <button :disabled="powerChartDate==currentDate" @click="setDateVal(1)"><i class="el-icon-arrow-right el-icon--right"></i></button>
              </span>
              
            </div>
            <div id="powerChart" :style="{width: '100%', height: '300px'}"></div>
          </div>
        </el-col>
        <el-col :lg="12" :md="24">
          <div class="flex-item box-power-bar box">
            <div class="title clearfix">
              <span>{{$t('index.totalConsumption')}}</span>
              <el-select v-model="yeildType" size="mini" v-show="chartType=='bar'" @change="initYieldChart(chartType,reportType)">
                <el-option value='1' :label="$t('overview.currentYield')"></el-option>
                <el-option value='2' :label="$t('overview.used')"></el-option>
              </el-select>
              <ul class="chartBtnWrap">
                <li :class="chartType=='pie'?'active':''" @click="initYieldChart('pie',reportType)"><i class="iconfont icon-chartPie"></i></li>
                <li :class="chartType=='bar'?'active':''" @click="initYieldChart('bar',reportType)"><i class="iconfont icon-chartBar"></i></li>
              </ul>
            </div>
            <div class="btn-group2 right-box-radio clearfix"> 
              <div class="radio-wrap">
                <div :class="reportType==1?'active':''" @click="initYieldChart(chartType,1)">
                  <span class="radio-box-modal"></span><font>{{$t('overview.daily')}}</font>：
                </div>
                <div class="btn-group">
                  <span class="box-title" :class="{ active:isActive==1 }" @click.stop="toggleBox(1)">
                    <span class="title-btn" id="day_menu">{{day}}</span><i class="el-icon-caret-bottom"></i>
                  </span>

                  <ul class="box-time" style="width:210px">
                    <li class="title">{{$t('overview.daily')}}</li>
                    <template v-for="count in dayList" >
                       <li :key="count">
                        <el-button 
                          type="text" 
                          :disabled="year==now_year&&month==now_month&&count>now_day" 
                          @click="day=count;isActive=0" 
                        >{{count}}
                        </el-button>
                      </li>
                    </template>
                  </ul>
                </div>
              </div>

              <div class="radio-wrap">
                <div :class="reportType==2?'active':''" @click="initYieldChart(chartType,2)">
                  <span class="radio-box-modal"></span><font>{{$t('overview.month')}}</font>：
                </div>
                <div class="btn-group">
                  <span class="box-title" :class="{ active:isActive==2 }" @click.stop="toggleBox(2)">
                    <span class="title-btn" id="month_menu">{{month}}</span><i class="el-icon-caret-bottom"></i>
                  </span>
                  <ul class="box-time" colspan="6"  style="width:180px">
                    <li class="title">{{$t('overview.month')}}</li>
                    <template v-for="count in 12" >
                      <li :key="count">
                        <el-button 
                          type="text" 
                          :disabled="year==now_year&&count>now_month" 
                          @click="month=count;isActive=0" 
                        >{{count}}
                        </el-button>
                      </li>
                    </template>
                  </ul>
                </div>
              </div>

              <div class="radio-wrap">
                <div :class="reportType==3?'active':''" @click="initYieldChart(chartType,3)">
                  <span class="radio-box-modal"></span><font>{{$t('overview.year')}}</font>：
                </div>
                <div class="btn-group">
                  <span class="box-title" :class="{ active:isActive==3 }" @click.stop="toggleBox(3)">
                    <span class="title-btn" id="year_menu">{{year}}</span><i class="el-icon-caret-bottom"></i>
                  </span>
                  <ul class="box-time" style="width:150px">
                    <li class="title">{{$t('overview.year')}}</li>
                    <template v-for="count in yearList">
                      <li class="grow" :key="count" @click="year=count;isActive=0">
                        <el-button 
                          type="text">
                          {{count}}
                        </el-button>
                      </li>
                    </template>
                  </ul>
                </div>
              </div>

              <div class="radio-wrap">
                <div :class="reportType==4?'active':''" @click="initYieldChart(chartType,4)"> 
                  <span class="radio-box-modal"></span>{{$t('all')}}
                </div>
              </div>
              
            </div>
            <div class="wrap-chart">
              <div class="wrap-pie" :class="{active:chartType=='pie'}">
                <div echart id="yieldPieChart1"></div>
                <div echart id="yieldPieChart2"></div>
                <div class="info">{{$t('overview.currentYield')}}:<span class="value">{{pieYield}}</span></div>
                <div class="info">{{$t('overview.used')}}:<span class="value">{{pieConsumeEnergy}}</span></div>
              </div>
              <div class="wrap-bar" :class="{active:chartType=='bar'}">
                <div echart id="yieldBarChart" :style="{width: '100%', height: '300px'}"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    <el-tooltip class="prompt" effect="dark" :content="$t('overview.importantNode')" placement="right">
      <i class="el-icon-warning"></i>
    </el-tooltip>
    <setPriceModal :siteId="siteId" @uploadPage="saveElectricity"></setPriceModal>
    <baseBaiduMap :mapData='mapData'></baseBaiduMap>
    <baseGoogleMap :mapData='mapData'></baseGoogleMap>
  </div>
</template>

<script>
import '@/utils/index.js'
import baseBaiduMap from '../../components/map/baseBaiduMap'
import baseGoogleMap from '../../components/map/baseGoogleMap'
import setPriceModal from '../site/set_price'
import { setTimeout } from 'timers';
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/pie')

export default {
  components:{
    baseBaiduMap,
    baseGoogleMap,
    setPriceModal
  },
  data(){
    return{
      markers:[],
      mapData:{
          width:'100%',
          height:'400px',
          zoom:10,
          center:{
              lng:113,
              lat:29
          },
          mapObj:{},//地图对象
          markers:[],//地图上所有的标记
          showType:'marker'
      },
      siteId:'',
      siteName:'',
      userData:JSON.parse(sessionStorage.getItem('userObj')),
      isSunFlag:true,
      gridPower:0,
      userInfo:{},
      weatherObj:{},
      powerObj:{gridPower:0,ratedPower:0},
      currentSize:0,//当前功率
      systemSize:0,//总功率
      sizeUnit:'W',//功率单位 W和kW
      inverterStatus:{},
      yieldObj:{todayYield:0,monthYield:0,yearYield:0,totalYield:0},
      electricity:{price:'',currency:''},//节约电费
      userPower:{},
      siteInfo:{},
      // pvBattery:{
      //   pvPower:0,
      //   batteryPower:0,
      //   bmsCapation:0,
      //   bmsState:-1//默认电池状态未知-不显示
      // },
      averageSOC:0,
      batteryStateClass:'',//0:放电  1:充电
      batteryStatusColor:'',
      pvPowerTotal:0,
      pvList:[],
      batteryList:[],
      grid_status:'1',
      powerChartDate:this.$options.filters['dateFormat'](new Date(),'YYYY-MM-DD'),
      chartType:'bar',
      reportType:'2',
      yeildType:'1',
      pieYield:0,
      pieConsumeEnergy:0,
      currentTime:this.$options.filters['dateFormat'](new Date()),
      currentDate:this.$options.filters['dateFormat'](new Date(),'YYYY-MM-DD'),
      day:this.$options.filters['dateFormat'](new Date(),'DD'),
      month:this.$options.filters['dateFormat'](new Date(),'MM'),
      year:this.$options.filters['dateFormat'](new Date(),'YYYY'),
      now_day:this.$options.filters['dateFormat'](new Date(),'DD'),
      now_month:this.$options.filters['dateFormat'](new Date(),'MM'),
      now_year:this.$options.filters['dateFormat'](new Date(),'YYYY'),
      yearList:[],
      isActive:0,
      powerChart:{},
      yieldPieChart1:{},
      yieldPieChart2:{},
      yieldBarChart:{},
      pickerOptions:{ //禁用今天之后的时间
          disabledDate(time) {
              return time.getTime() > Date.now()
          }
      },
      
      semicircleChart:{},//半圆图
      countChart:{},//饼图
      outOfRangeHint:true,
      relayPowerFlag:'',
      feedInPowerFlag:'',
      inverterEPSPowerFlag:'',
      inverterEPSEnergyFlag:'',
    }
  },
  mounted(){
    if(!(localStorage.getItem('relayPowerFlagSite')) && localStorage.getItem('relayPowerFlagSite') !=='0'){
      localStorage.setItem('relayPowerFlagSite','0')
    }
    if(!(localStorage.getItem('gridStatusSite')) && localStorage.getItem('gridStatusSite') !=='1'){
      localStorage.setItem('gridStatusSite','1')
    }
    if(!(localStorage.getItem('feedInPowerFlagSite')) && localStorage.getItem('feedInPowerFlagSite') !=='0'){
      localStorage.setItem('feedInPowerFlagSite','0')
    }
    if(!(localStorage.getItem('inverterEPSPowerFlagSite')) && localStorage.getItem('inverterEPSPowerFlagSite') !=='0'){
      localStorage.setItem('inverterEPSPowerFlagSite','0')
    }
    if(!(localStorage.getItem('inverterEPSEnergyFlagSite')) && localStorage.getItem('inverterEPSEnergyFlagSite') !=='0'){
      localStorage.setItem('inverterEPSEnergyFlagSite','0')
    }
    this.relayPowerFlag = localStorage.getItem('relayPowerFlagSite')
    this.feedInPowerFlag = localStorage.getItem('feedInPowerFlagSite')
    this.inverterEPSPowerFlag = localStorage.getItem('inverterEPSPowerFlagSite')
    this.inverterEPSEnergyFlag = localStorage.getItem('inverterEPSEnergyFlagSite')
    this.grid_status = localStorage.getItem('gridStatusSite')
    this.siteId=this.$route.query.siteId
    this.siteName=this.$route.query.siteName
    for(let i=2017;i<=this.year;i++){
      this.yearList.push(i);
    }
    this.getYeildyBySite();//获取当前发电量
    this.getPowerBySite();//获取当前功率
    this.getSiteInfoCount();//获取信息统计
    this.getWeather();//获取太阳动画数据

    this.getInverterStatesBySiteId()
    this.getpvBattery()

    this.saveElectricity();//节约电费
    this.powerChart = echarts.init(document.getElementById('powerChart'));
    this.yieldPieChart1 = echarts.init(document.getElementById('yieldPieChart1'));
    this.yieldPieChart2 = echarts.init(document.getElementById('yieldPieChart2'));
    this.yieldBarChart = echarts.init(document.getElementById('yieldBarChart'));
    this.semicircleChart = echarts.init(document.getElementById('semicircleChart'));
    this.countChart = echarts.init(document.getElementById('countChart'));

    this.initPowerChart();//功率曲线
    this.initYieldChart(this.chartType,this.reportType);


    this.getSitePvs()
    this.getSiteBatterys()


    window.addEventListener('resize', () => {
      this.powerChart.resize();
      this.yieldPieChart1.resize()
      this.yieldPieChart2.resize()
      this.yieldBarChart.resize()

      this.semicircleChart.resize()
      this.countChart.resize();
    })
    document.addEventListener('click',this.toggleBox);
    this.getMap()
  },
  destroyed(){
    document.removeEventListener('click',this.toggleBox);
  },
  computed: {
    dayList: function () {
      if(this.month==1||this.month==3||this.month==5||this.month==7||this.month==8||this.month==10||this.month==12) return 31;
      if(this.month==4||this.month==6||this.month==9||this.month==11) return 30;
      if(this.month==2&&this.year%4==0) return 29;
      if(this.month==2&&this.year%4!=0) return 28;
    }
  },
  watch:{
    day(){
      this.initYieldChart(this.chartType,this.reportType);
    },
    month(){
      this.day=this.$options.filters['dateFormat'](new Date(),'DD');
      this.initYieldChart(this.chartType,this.reportType);
    },
    year(){
      this.day=this.$options.filters['dateFormat'](new Date(),'DD');
      this.initYieldChart(this.chartType,this.reportType);
    }
  },
  methods:{
    convertPowerUnit(num){
      console.log(num,'convertPowerUnit')
      num=num||0;
      if(this.powerObj.ratedPower<10){
        this.sizeUnit='W'
        return num.toFixed(2)
      }else{
        this.sizeUnit='kW'
        return (num/1000).toFixed(2)
      }
    },
    gridStatusChange(){
      this.grid_status=this.grid_status=='1'?'0':'1'
      localStorage.setItem('gridStatusSite',this.grid_status)
    },
    async getSitePvs(){
      let res = await this.API.getSitePvs({
        siteId:this.siteId
      })
      this.pvList=res.pvs;
      this.pvPowerTotal=res.pvPowerTotal;
      console.log(res,'pvList')
    },
    async getSiteBatterys(){
      let res = await this.API.getSiteBatterys({
        siteId:this.siteId
      })
      console.log(res,'battery----')
      for(let key in res){
        if(res[key].batteryFlag==0){
          delete res[key]
        }
      }
      this.batteryList=res.inverters;
      this.averageSOC=res.avgSoc;
      if(res.batteryState===0){
        this.batteryStateClass='discharge'
      }else if(res.batteryState===1){
        this.batteryStateClass='charge'
      }else if(res.batteryState===2){
        this.batteryStateClass=''
      }
    },
    async getInverterStatesBySiteId(){
      let res= await this.API.getInverterStatesBySiteId({
        siteId:this.siteId
      })
      if(res){
        this.inverterStatus=res
        let data=[
            {value: res[1], name: this.$t('inverterStatus.status1')},
            {value: res[4], name: this.$t('inverterStatus.status4')},
            {value: res[2], name: this.$t('inverterStatus.status2')},
            {value: res[3], name: this.$t('inverterStatus.status3')},
        ]
        if(res[1]==0&&res[4]==0&&res[2]==0&&res[3]==0){
          this.initCountChart([{},{},{},{value:1,name:''}],false)
        }else{
          this.initCountChart(data)
        }
      }
    },
    //pv battery
    async getpvBattery(){
      let res = await this.API.getpvBattery({
        inverterSn:this.inverterSn,
        type:this.inverterType||'4',
        currentTime:this.currentTime,
        lang:localStorage.getItem('lang')||'zh_CN'
      })
      this.pvBattery=res;
      if(res.bmsState===-1){//未知：灰色
        this.batteryStatusColor='gray'
      }else if(res.bmsState===0){//故障：红色
        this.batteryStatusColor='red'
      }else if(res.bmsState===1){//正常：绿色
        this.batteryStatusColor='green'
      }
    },

    //半圆图
    initSemicircleChart(relayPower,gridpower){
      var option = {
        grid: {
          left: "0",
          right: "0",
          bottom: "2%",
          containLabel: true
        },
        series: [
          {
            name: "一般",
            type: "pie",
            //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: false,
            tooltip: {},
            radius: ["100%", "75%"],
            center: ["50%", "60%"],
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: relayPower,
                itemStyle: {
                  normal: {
                    color: "rgba(80,150,224,0)"
                  }
                }
              },
              {
                value: gridpower,  // 渐变色部分
                itemStyle: {
                  color:'#ffc835'
                  // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //   { offset: 0, color: "#FFDE00" },
                  //   { offset: 0.5, color: "#00ECD9" },
                  //   { offset: 1, color: "#00ECD9" }
                  // ])
                },
              },
              {
                value: relayPower-gridpower, // 右侧部分
                itemStyle: {
                  normal: {
                    color: "#ccc"
                  }
                }
              }
            ]
          }
        ]
      }
      this.semicircleChart.setOption(option)
    },
    //饼图 在线数量
    initCountChart(data,flag=true){
      var option = {
        tooltip: {
            show:flag,//都为0时不显示
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
        },
        color:['#7bc594','#fdd001','#ef708b','#bdbdbd'],
        series: [
            {
                type: 'pie',
                radius: ['55%', '85%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: '30',
                //         fontWeight: 'bold'
                //     }
                // },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
      };
      this.countChart.setOption(option)
    },

    //切换时间
    setDateVal(append){
      this.powerChartDate=this.UtilsFun.setReportDate(this.powerChartDate,append);
      this.initPowerChart();
    },
    toggleBox(index){
      index=index!=0?index:0;
      if(index==0) console.log(index);
      if (this.isActive==index) {
        this.isActive=0;
      }else{
        this.isActive=index;
      }
    },
    forEachYield(res,i,xAxisData,yAxisData,g_data,d_data,c_data,eps_data){
      let flag=true;
      res.forEach(item=>{
        if(item.time==i){
          xAxisData.push(item.time);
          if(item.yieldtoday!=null){
            if(item.yieldtoday<=0){
              yAxisData.push(0.00);
            }else{
              yAxisData.push(item.yieldtoday.toFixed(2));
            }
          }else{
            yAxisData.push('-');
          }
          
          if(item.feedinenergy!=null){
						if(item.feedinenergy<=0){
							g_data.push(0.00);
						}else if(item.yieldtoday>=0 && item.yieldtoday<item.feedinenergy){
							//处理并网电量大于发电量时   并网电量显示发电量
							g_data.push(item.yieldtoday.toFixed(2));
						}else{
							g_data.push(item.feedinenergy.toFixed(2));
						}
					}else{
						g_data.push('-');
          }
          
          if(item.yieldtoday!=null && item.feedinenergy!=null){
						if(item.yieldtoday-item.feedinenergy<=0){
							d_data.push(0.00);
						}else{
							d_data.push((item.yieldtoday-item.feedinenergy).toFixed(2));
						}
					}else{
						d_data.push('-');
          }
          
          if(item.consumeenergy!=null){
						if(item.consumeenergy<=0){
							c_data.push(0.00);
						}else{
							c_data.push(item.consumeenergy.toFixed(2));
						}
					}else{
						c_data.push('-');
          }
          
          if(item.epsEnergy!=null){
            if(item.epsEnergy<=0){
              eps_data.push(0.00);
            }else{
              eps_data.push(item.epsEnergy.toFixed(2));
            }
          }else{
            eps_data.push('-');
          }
          
          flag=false;
        }
      })
      if (flag) {
				xAxisData.push(i);
				yAxisData.push('-');
				g_data.push('-');
				d_data.push('-');
				c_data.push('-');
				eps_data.push('-');
			}
    },
    async getYeildyBySite(){
      let res=await this.API.getYeildyBySite({
        siteId:this.siteId,
        currentTime: this.currentTime
      })
      console.log(res,'--------------')
      this.yieldObj=res;
    },
    
    //信息统计
    async getSiteInfoCount(){
      let res = await this.API.getSiteInfoCount({
        siteId: this.siteId
      })
      this.siteInfo=res;
    },
    //当前功率 安装容量
    async getPowerBySite(){
      let res = await this.API.getPowerBySite({
        siteId:this.siteId,
        currentTime: this.currentTime
      })
      console.log(res,'安装容量  功率')
      this.powerObj=res;
      this.currentSize = this.convertPowerUnit(this.powerObj.gridPower)
      this.systemSize = this.convertPowerUnit(this.powerObj.ratedPower*1000)

      if(this.powerObj.ratedPower>0){
        if(this.powerObj.ratedPower*1000<this.powerObj.gridPower){
          this.initSemicircleChart(1,1)
        }else{
          this.initSemicircleChart(this.systemSize,this.currentSize)
        }
      }else{
        this.initSemicircleChart(1,0)
      }
    },
    //节约电费
    async saveElectricity(){
      let res = await this.API.saveElectricity({
        siteId:this.siteId
      })
      this.electricity=res;
    },
    //获取天气
    async getWeather(){
      let res = await this.API.getSunBySite({
        id: this.siteId
      })
      console.log(res,'天气')
      
      if(res){
        this.weatherObj={
          // city:(res.cnty||'') +' '+ (res.city||''),
          city:res.city||res.cnty||'',
          date1:res.date,
          img1:res.coded,
          tmp1:res.tmpMin?res.tmpMin+' ~ '+res.tmpMax+'℃':'',
        }
        let code=0;
        if(res.coded){
          code=Number(res.coded);
        }
        if(code==100||code==103||code==104){
          this.weatherObj.bg='sunny'
        }else if(code==101||code==102||code==153){
          this.weatherObj.bg='cloudy'
        }else if(code>=300&&code<=318){
          this.weatherObj.bg='rainy'
        }else if((code>=400&&code<=410)||code==499){
          this.weatherObj.bg='snowy'
        }else{
          this.weatherObj.bg='other'
        }
        //nextDayWeathers  未来两天天气
        let nextDay=res.nextDayWeathers?res.nextDayWeathers:[]
        let nextDayObj={}
        if(nextDay.length>0){
          nextDayObj={
            date2:nextDay[0].date,
            img2:nextDay[0].coded,
            tmp2:nextDay[0].tmpMin?nextDay[0].tmpMin+' ~ '+nextDay[0].tmpMax+'℃':'',
            date3:nextDay[1].date,
            img3:nextDay[1].coded,
            tmp3:nextDay[1].tmpMin?nextDay[1].tmpMin+' ~ '+nextDay[1].tmpMax+'℃':''
          }
        }else{
          nextDayObj={
            date2:'',
            img2:'',
            tmp2:'',
            date3:'',
            img3:'',
            tmp3:''
          }
        }
        this.weatherObj=Object.assign(this.weatherObj, nextDayObj);
        
        this.weatherObj.img1=res.coded?require('../../assets/img/weather/'+res.coded+'.png'):'';
        if(nextDay.length>0){
          this.weatherObj.img2=nextDay[0].coded?require('../../assets/img/weather/'+nextDay[0].coded+'.png'):'';
          this.weatherObj.img3=nextDay[1].coded?require('../../assets/img/weather/'+nextDay[1].coded+'.png'):'';
        }
        if(res.date){
          var startTime=new Date(res.date.replace(/-/g,'/')+' '+res.sr+':00').getTime();//开始时间
          var endTime=new Date(res.date.replace(/-/g,'/')+' '+res.ss+':00').getTime();//结束时间
          var date = res.nowUtcTime?new Date(res.nowUtcTime):new Date();
          if(!(date>startTime && date<endTime)){
            this.weatherObj.img1=res.coden?require('../../assets/img/weather/'+res.coden+'.png'):'';
            // if(nextDay.length>0){
            //   this.weatherObj.img2=nextDay[0].coden?require('../../assets/img/weather/'+nextDay[0].coden+'.png'):'';
            //   this.weatherObj.img3=nextDay[1].coden?require('../../assets/img/weather/'+nextDay[1].coden+'.png'):'';
            // }
          }
        }
      }
    },
    initYieldPie(chartObj,chartData){
      let option = {
          color:chartData.color,
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}kWh'
            },
            legend: {
                left: 'center',
                bottom:5,
                icon: 'circle',
                itemGap:15,
                itemWidth:12,
                itemHeight:12,
                data: chartData.legend,
                textStyle: {
                    rich: {
                        value: {
                            fontSize: 12,
                            lineHeight: 12,
                            color: '#ff8920'
                        }
                    }
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['30%', '50%'],
                    center: ['50%', '43%'],
                    hoverOffset:3,
                    label:{
                      normal: {
                        show: true,
                        formatter: (params)=>{
                                return params.percent+'%';
                            },
                        textStyle: {
                          fontSize: 15,
                        },
                        position: 'outside'
                      }
                    },
                    labelLine:{
                      show:false,
                      length:10,
                      length2:0
                    },
                    data: chartData.series,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
      chartObj.setOption(option, true);
    },
    //电量统计
    async initYieldChart(chartType,reportType){
      console.log(chartType);
      this.chartType=chartType;
      this.reportType=reportType;
      var dateTime='';
      let m = this.month>9?this.month:"0"+this.month;//获取当前月份的日期
      let d = this.day>9?this.day:"0"+this.day;
      if(this.reportType==1) dateTime=this.year+'-'+m+'-'+d
      if(this.reportType==2) dateTime=this.year+'-'+m
      if(this.reportType==3) dateTime=this.year


      if(this.chartType=='pie'){
        let data = await this.API.getAggYieldBySite({
          reportType : reportType,
          dateTime : dateTime,
          currentTime : this.currentDate,
          siteId: this.siteId
        })
        console.log(data);
        if(data){
          //yield发电量   feedinEnergy 并网电量    consumeEnergy耗电电量
          //自发自用=发电量-并网电量
          if(data.feedinEnergy > data.yield){
            data.feedinEnergy = data.yield
          }
          this.pieYield = data['yield']>1000?(data['yield']/1000).toFixed(2)+'MWh':data['yield'].toFixed(2)+'kWh'
          this.pieConsumeEnergy = data['consumeEnergy']>1000?(data['consumeEnergy']/1000).toFixed(2)+'MWh':data['consumeEnergy'].toFixed(2)+'kWh'
          var selfUser=data['yield']-data['feedinEnergy']>0?data['yield']-data['feedinEnergy']:0;
          var pieChartData={
              color:['#f4b600','#6da719'],
              legend:[this.$t('index.toGrid'),this.$t('index.directSelfUse')],
              series:[
                      {value: data['feedinEnergy'].toFixed(2), name: this.$t('index.toGrid')},
                      {value: selfUser.toFixed(2), name: this.$t('index.directSelfUse')},
                    ]
          };
          var pieChart2Data={
              color:['#eb6206','#6da719'],
              legend:[this.$t('index.powerConsumption'),this.$t('index.directSelfUse')],
              series:[
                      {value: data['consumeEnergy'].toFixed(2), name: this.$t('index.powerConsumption')},
                      {value: selfUser.toFixed(2), name: this.$t('index.directSelfUse')},
                    ]
          };
          this.initYieldPie(this.yieldPieChart1,pieChartData)
          this.initYieldPie(this.yieldPieChart2,pieChart2Data);
        }
      }else if(this.chartType='bar'){
        let res = await this.API.getYeildyChartBySite({
          siteId:this.siteId,
          reportType : reportType,
          day : this.day,
          month : this.month,
          year : this.year,
          webTime : this.$options.filters['dateFormat'](new Date(),'YYYY,MM,DD')
        })

        let resData=res.returnList;//数据
        let maxTick=res.max;//最大刻度

        let xAxisData=[],yAxisData=[],g_data=[],d_data=[],c_data=[],eps_data=[];
        let array_data1=[],array_data2=[],array_data3=[],array_data4=[];
        let theMax1=0,theMax2=0,theMax3=0,theMax4=0;//最大值
        let _this=this;
        let unit_time='';

        if(resData!=null && resData.length>0){
          resData.forEach(item=>{
            array_data1.push(item.yieldtoday<0?0:item.yieldtoday);
            array_data2.push(item.feedinenergy<0?0:item.feedinenergy);
            if(item.yieldtoday!=null && item.feedinenergy!=null){
              array_data3.push(item.yieldtoday-item.feedinenergy<0?0:(item.yieldtoday-item.feedinenergy));
            }else{
              array_data3.push(null);
            }
            array_data4.push(item.consumeenergy<0?0:item.consumeenergy);//耗电量
          })
          theMax1=(this.$options.filters['MaxNum'](array_data1)/10000).toFixed(2);
          theMax2=(this.$options.filters['MaxNum'](array_data2)/10000).toFixed(2);
          theMax3=(this.$options.filters['MaxNum'](array_data3)/10000).toFixed(2);
          theMax4=(this.$options.filters['MaxNum'](array_data4)/10000).toFixed(2);//耗电量
        }
        
          //根据日期类型初始化数据
          if(reportType==1){
            unit_time=this.$t('index.unitTimeHour');
            let hour=23;
            for(let i=0;i<=hour;i++){
              this.forEachYield(resData,i,xAxisData,yAxisData,g_data,d_data,c_data,eps_data);
            }
          }else if(reportType==2){
            unit_time=this.$t('index.unitTimeDay');
            for(let i=1;i<=this.dayList;i++){
              this.forEachYield(resData,i,xAxisData,yAxisData,g_data,d_data,c_data,eps_data);
            }
          }else if(reportType==3){
            unit_time=this.$t('index.unitTimeMonth');
            for(let i=1;i<=12;i++){
              this.forEachYield(resData,i,xAxisData,yAxisData,g_data,d_data,c_data,eps_data);
            }
          }else if(reportType==4){
            unit_time=this.$t('index.unitTimeYear');
            let temp;
            for(var i=0; i < resData.length; i++){
              for(var j=0; j < resData.length-i-1; j++){
                if(resData[j].time>resData[j+1].time){
                  temp=resData[j];
                  resData[j]=resData[j+1];
                  resData[j+1]=temp;
                }
              }             
            }

            resData.forEach(item=>{
              xAxisData.push(item.time);
              if(item.yieldtoday!=null){
                if(item.yieldtoday<=0){
                  yAxisData.push(0.00);
                }else{
                  yAxisData.push(item.yieldtoday.toFixed(2));
                }
              }else{
                yAxisData.push('-');
              }
              
              if(item.feedinenergy!=null){
                if(item.feedinenergy<=0){
                  g_data.push(0.00);
                }else if(item.yieldtoday>=0 && item.yieldtoday<item.feedinenergy){
                  //处理并网电量大于发电量时   并网电量显示发电量
                  g_data.push(item.yieldtoday.toFixed(2));
                }else{
                  g_data.push(item.feedinenergy.toFixed(2));
                }
              }else{
                g_data.push('-');
              }
              
              if(item.yieldtoday!=null && item.feedinenergy!=null){
                if(item.yieldtoday-item.feedinenergy<=0){
                  d_data.push(0.00);
                }else{
                  d_data.push((item.yieldtoday-item.feedinenergy).toFixed(2));
                }
              }else{
                d_data.push('-');
              }
              
              if(item.consumeenergy!=null){
                if(item.consumeenergy<=0){
                  c_data.push(0.00);
                }else{
                  c_data.push(item.consumeenergy.toFixed(2));
                }
              }else{
                c_data.push('-');
              }

              if(item.epsEnergy!=null){
                if(item.epsEnergy<=0){
                  eps_data.push(0.00);
                }else{
                  eps_data.push(item.epsEnergy.toFixed(2));
                }
              }else{
                eps_data.push('-');
              }

            })
          }

          let yeildData;
          if(this.yeildType=='1'){
            yeildData={name:this.$t('index.toGrid'),color:'#f4b600',data:g_data}
          }else if(this.yeildType=='2'){
            yeildData={name:this.$t('index.powerConsumption'),color:'#eb6206',data:c_data}
          }

          let optionObj={
            tooltip:{
              formatter: function (params) {
                if(params.length==0) return ""
                var text = _this.$options.filters['formatUnitTime'](unit_time,params[0]['axisValue'])+'<br>';
                if(params.length>0){
                  var params1=params[0]['data']=='-'?'-':parseFloat(params[0].data).toFixed(2);
                  text += params[0]['seriesName']+' : '+params1+'kWh<br>';
                }
                if(params.length>1){
                  var params2=params[1]['data']=='-'?'-':parseFloat(params[1].data).toFixed(2);
                  text += params[1]['seriesName']+' : '+params2+'kWh<br>';
                }
                if(params.length>2){
                  var params3=params[2]['data']=='-'?'-':parseFloat(params[2].data).toFixed(2);
                  text += params[2]['seriesName']+' : '+params3+'kWh<br>';
                }
                return text;
              }
            },
            legend:{
              selected:{}
            },
            xAxis:{
              name:'('+unit_time+')',
              data : xAxisData
            },
            yAxis:{
              name:'kWh'
            },
            grid : {
              left : '15px',
              top : '50px',
              right : '70px',
              bottom : '40px',
              containLabel :true
            },
            series : [
              this.EchartsUtil.getSeries({type:'bar',name:this.$t('index.directSelfUse'),barMaxWidth:20,stack:'one',color:'#6DA719',data:d_data}),
              this.EchartsUtil.getSeries({type:'bar',name:yeildData.name,barMaxWidth:20,stack:'one',color:yeildData.color,data:yeildData.data}),
              this.EchartsUtil.getSeries({type:'bar',name:this.$t('device.inverter_EPS_Energy'),barMaxWidth:20,stack:'one',color:'#ef708b',data:eps_data}),
            ]
          };
            this.$set( optionObj.legend.selected,this.$t('device.inverter_EPS_Energy'),this.inverterEPSEnergyFlag === '0'?false:true)
            this.yieldBarChart.setOption(this.EchartsUtil.getOption(optionObj));
            let echartThat = this
            this.yieldBarChart.on('legendselectchanged', function(params) {
              if(params.selected[echartThat.$t('device.inverter_EPS_Energy')]){
                localStorage.setItem('inverterEPSEnergyFlagSite','1')
              }else{
                localStorage.setItem('inverterEPSEnergyFlagSite','0')
              }
            })
        }

    },
    //功率曲线
    async initPowerChart(){
      let res = await this.API.getSitePowerBySite({
        siteId:this.siteId,
        time: this.powerChartDate
      })
      //统计范围超过数量
      if(res.code==1&&this.outOfRangeHint){
        this.$alert(this.$t('outOfRangeHint'),{
          confirmButtonText: this.$t('sure')
        });
        this.outOfRangeHint=false
      }
      let resData=res?res.object:[]
      // if(resData.length>0){
      //   resData = [res.object[100]]
      // }
      //判断是否有其他设备功率
      let flag_other=false
      resData.forEach(item=>{
        if(item.feedinPowerMeter2){
          flag_other=true
        }
      })
      let siteAndOverOther=this.$t('overview.siteAndOver.other');
      let selectedArray=[this.$t('index.solarPower'),this.$t('index.outPutPower'),this.$t('newoverView.relayPower'),this.$t('index.feedInPower'),this.$t('device.inverter_EPS_Power')];
      let colorArray=['#f4b600','#72BC38','#C962F7','#eb6206','#00a3ca'];
      if(flag_other){
        selectedArray.unshift(this.$t('overview.siteAndOver.other'));
        colorArray.unshift('#0DDEB2');
      }

      // let powerdc=0;//PV功率
      // let gridpower;//AC功率
      // let feedinpower;//并网功率
      // let batPower;//电池功率
      // let overOther//其他设备功率
      // let loadPower;//负载功率
      
      let times1=[],times2=[],times3=[],times4=[],times5=[],times6=[];
      resData.forEach(item=>{
        let powerdc=0;
        if(item.powerdc1){
          powerdc += item.powerdc1;
        }
        if(item.powerdc2){
          powerdc += item.powerdc2;
        }
        if(item.powerdc3){
          powerdc += item.powerdc3;
        }
        if(item.powerdc4){
          powerdc += item.powerdc4;
        }
        let time=new Date(Date.parse( (item.uploadTimeValue.replace(/-/g,"/")).replace(/\./g,"") )).getTime()
        times1.push(powerdc);//pv功率
        times2.push(item.gridpower);//AC功率
        times3.push(item.relayPower||0);//负载
        times4.push(item.feedinpower);//并网功率
        times5.push(item.EPSPower);//EPS功率
        // times6.push([time,item.feedinPowerMeter2]);//其它功率
        // times5.push([time,item.batPower1]);//电池功率
      })

      var option = {
          color:colorArray,
          tooltip: {
              trigger: 'axis',
          },
          legend: {
            show : true,
            itemGap : 10,// 间距
            y : 'bottom',
            textStyle : {
              color : '#68676C',
              fontSize : 12
            },
            selected:{

            }
          },
          grid : {
            left : '15px',
            top : '50px',
            right : '40px',
            bottom : '50px',
            containLabel :true
          },
          xAxis: {
              type: 'category',
              nameTextStyle:{
                color : '#68676C',
                fontSize:11
              },
              axisLine: {
                onZero: false,
                lineStyle:{
                  width:0
                }
              },
              axisTick : {
                inside : false
              },
              splitLine: {
                  show: false
              },
              data: resData.map(item=>{
                  return  item.uploadTimeValue.slice(11,16)
              }),
              // axisLabel : {
              //   formatter: function(value,index){
              //     var date = new Date(value);
              //     var hour = date.getHours()<10?'0'+ date.getHours():date.getHours();
              //     var minutes = date.getMinutes()<10?'0'+ date.getMinutes():date.getMinutes();
              //     return hour+':'+minutes;
              //   },
              //   textStyle : {
              //     color : '#68676C'
              //   }
              // }
          },
          yAxis: {
              type: 'value',
              nameTextStyle: {
                color: '#777',
                fontSize: 12,
              },
              axisLine : {
                show : false
              },
              axisTick : {
                show : false
              },
              splitLine : {
                show : true,
                lineStyle : {
                  color : [ '#dbdbdc' ]
                }
              },
              axisLabel : {
                formatter: '{value} W',
                textStyle : {
                  color : '#68676C'
                }
              }
          },
          dataZoom: [{
              type: 'inside'
          }],
          series: [{
              name: this.$t('index.solarPower'),
              type: 'line',
              symbol: 'none',
              smooth : true,
              lineStyle:{
                width:1
              },
              areaStyle: {
                opacity:0.3
              },
              data:times1
          },{
              name: this.$t('index.outPutPower'),
              type: 'line',
              symbol: 'none',
              smooth : true,
              lineStyle:{
                width:1
              },
              areaStyle: {
                opacity:0.3
              },
              data:times2
          },{
              name: this.$t('newoverView.relayPower'),
              type: 'line',
              symbol: 'none',
              smooth : true,
              smooth : true,
              lineStyle:{
                width:1
              },
              areaStyle: {
                opacity:0.3
              },
              data:times3
          },{
              name: this.$t('index.feedInPower'),
              type: 'line',
              symbol: 'none',
              smooth : true,
              smooth : true,
              lineStyle:{
                width:1
              },
              areaStyle: {
                opacity:0.3
              },
              data:times4
          },{
              name: this.$t('device.inverter_EPS_Power'),
              type: 'line',
              symbol: 'none',
              smooth : true,
              smooth : true,
              lineStyle:{
                width:1
              },
              areaStyle: {
                opacity:0.3
              },
              data:times5
          }]
      };

      this.$set( option.legend.selected,this.$t('newoverView.relayPower'),this.relayPowerFlag=='0'?false:true)
      this.$set( option.legend.selected,this.$t('index.feedInPower'),this.feedInPowerFlag=='0'?false:true)
      this.$set( option.legend.selected,this.$t('device.inverter_EPS_Power'),this.inverterEPSPowerFlag=='0'?false:true)
      this.powerChart.setOption(option);
      let echartThat = this
      this.powerChart.on('legendselectchanged', function(params) {
        if(params.selected[echartThat.$t('newoverView.relayPower')]){
          localStorage.setItem('relayPowerFlagSite','1')
        }else{
          localStorage.setItem('relayPowerFlagSite','0')
        }
        if(params.selected[echartThat.$t('index.feedInPower')]){
          localStorage.setItem('feedInPowerFlagSite','1')
        }else{
          localStorage.setItem('feedInPowerFlagSite','0')
        }
        if(params.selected[echartThat.$t('device.inverter_EPS_Power')]){
          localStorage.setItem('inverterEPSPowerFlagSite','1')
        }else{
          localStorage.setItem('inverterEPSPowerFlagSite','0')
        }
      })
    },
    async getMap(){
      this.UtilsFun.createGoogle()
      let res = await this.API.selectSiteMapAddress({
        id:this.siteId
      })
      if(res.longitude!=''&&res.longitude!=null&&res.latitude!=''&&res.latitude!=null){
          let pointType=localStorage.getItem('mapType')==1?'baidu':'google'
          var transParam = this.UtilsFun.transformPoint(res.latitude,res.longitude,pointType);
          this.mapData.markers=[{lng:Number(transParam.longitude),lat:Number(transParam.latitude)}]
          this.mapData.center=this.mapData.markers[0]
      }
    },
    //打开地图
    showMap(){
      // console.log(this.mapData.markers,'----------------------point')
      if(this.mapData.markers.length>0){
        if(localStorage.getItem('mapType')==1){
          this.$store.commit('setVisibleBaiduMap',true)
        }else{
          this.$store.commit('setVisibleGoogleMap',true)
        }
      }else{
        this.$message.error('您未录入电站位置信息')
      }
    }
  }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;

.text-overflow(){
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.overview_site{
  background: #efefef;
  padding: 20px;
  .page-title{
    padding: 10px;
    color: @color_title;
    font-size: 14px;
    span{
      color: @color_light;
    }
  }
  .prompt{
    color: @color_light;
    font-size: 25px;
    margin: 0 20px;
  }
  .row{
    margin-bottom:20px;
    margin-left: 0;
    margin-right: 0;
  }
    .flex-item{
      background:#fff;
      border-radius: @border_radius;
      .title{
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: @border_bottom;
        color: @color_title;
      }

      &.box-power{
        display: flex;
        flex-direction: column;
        .row{
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-right: 1px solid#DCDCDC;
          &:last-child{
            border-bottom: 1px solid #DCDCDC;
          }
          .col{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            border-left: 1px solid#DCDCDC;
            border-top: 1px solid#DCDCDC;
            .img{
              margin: 0px auto;
              width: 40px;
              height: 40px;
              background: url(../../assets/img/overview/icons_power.png) no-repeat;
              &.icon1{
                background-position: 0 0;
              }
              &.icon2{
                background-position: 0 -45px;
              }
              &.icon3{
                background-position: 0 -90px;
              }
              &.icon4{
                background-position: 0 -135px;
              }
              >img{
                height:50px;
              }
            }
            .title{
              color: @color_title;
              border-bottom: @border_bottom;
              padding: 6px;
            }
            .text{
              padding: 3px 0;
              text-align: center;
              .value{
                font-size: 20px;
                color: @color_light;  
              }
              .unit{
                font-size: 12px;
                color: @color_unit;
                margin-left:3px ;
              }
            }
            p{
              margin: 0;
              color: @color_text;
              font-size: 14px;
            }
          }
        }

      }
      &.box-power-bar{
        position: relative;
        .title{
          >.el-select {
            margin-left:10px;
          }
        }
        .chartBtnWrap{
          float: right;
          li{
            float: left;
            padding-left: 15px;
            cursor: pointer;
            .iconfont{
              font-size: 20px;
              color: @color_unit;
            }
            &.active{
              .iconfont{
                color:@color_light;
              }
            }
          }
        }
        .right-box-radio{
          position: absolute;
          right: 20px;
          z-index: 3;
        }

        .wrap-chart{
          position: relative;
          height:300px;
        }
        .wrap-pie{
          >div{
            float: left;
            width: 50%;
            &[echart]{
              height: 280px;
            }
            &.info{
              text-align: center;
              color: @color_text;
              font-size: 14px;
              .value{
                color: @color_light;
              }
            }
          }
        }
        .wrap-pie,.wrap-bar{
          position: absolute;
          width: 100%;
          height: max-content;
          top: 0;
          left: 0;
          background: #fff;
          visibility: hidden;
          &.active{
            visibility:visible;
          }
        }

      }
      &.box-info{
        .list{
          padding: 0 10px;
          display: flex;
          flex-direction: column;
          align-content:space-between;
          height: 100%;
          li{
            display: flex;
            flex:1;
            align-items: center;
            &.title{
              padding: 0;
              height: 40px;
              line-height: 40px;
              flex-grow: 0;
              color: @color_title;
            }
            &:not(:first-child){
              padding: 10px 0;
            }
            .img{
              flex:1;
              text-align: right;
              padding-right: 21px;
            }
            .name{
              flex:2;
              font-size: 16px;
              color:@color_text;
            }
            .value{
              float: right;
              font-size: 18px;
              color:@color_light;
            }
          }
        }
      }
      .el-button--primary {
        color: #6d6d6d;
        background-color: #ffffff;
        border-color: #f4b600;
      }
    }

    .time-group{
      float: right;
      .el-input{
        width: 150px;
      }
      button{
        border:none;
        background: transparent;
        &:focus {
          outline: none;
        }
        &:not(:disabled):hover{
          cursor: pointer;
          color: @color_light;
        }
        i{
          line-height: 24px;
          font-weight: bold;
          font-size: 14px;
          
        }
      }
    }

  background: #efefef;
  color:#3a4457;

  .box{
    height: 100%;
    background: #fff;
    box-shadow: 4px 4px 5px rgba(0,0,0,.1);
    border-radius: 10px;
    overflow: hidden;
    &.box-weather{
      border-radius: 10px;
      height: 250px;
      overflow: hidden;
      &.sunny{
        background: url(../../assets/img/overview_new/sunny.png) no-repeat top center / cover;
      }
      &.cloudy,&.other{
        background: url(../../assets/img/overview_new/cloudy.png) no-repeat top center / cover;
      }
      &.rainy{
        background: url(../../assets/img/overview_new/rainy.png) no-repeat top center / cover;
      }
      &.snowy{
        background: url(../../assets/img/overview_new/snowy.png) no-repeat top center / cover;
      }
    
      .weather-1{
        height: 250px;
        border-right: 1px solid #d2d2d2;
        .location{
          height: 40%;
          padding: 20px;
          box-sizing: border-box;
          font-size: 20px;
          color: #fff;
          i{
            font-size: 24px;
          }
        }
        .info span{
          display: inline-block;
          width: calc(100% - 70px);
          text-align: center;
        }
      }
      .weather-2,.weather-3{
        height: 125px;
      }
      .info{
        font-size: 18px;
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        .date{
          font-size: 24px;
        }
        img{
          vertical-align: middle;
        }
        span{
          display: inline-block;
          font-size: 24px;
          vertical-align: middle;
          padding-left:10px;
        }
        &.sub{
          padding:20px 0;
          font-size: 14px;
          .date{
            margin-bottom: 20px;
            font-size: 20px;
          }
          span{
            font-size: 18px;
          }
          
        }

      }
    }

    &.box-countInfo{
      
      .wrap{
        position: relative;
        height: 250px;
        .semicircle{
          width: 100%;
          height: 270px;
        }
        .semicircle-label{
          position: absolute;
          top: 80%;
          left: 50%;
          transform: translate(-50%);
          width: 100%;
          text-align: center;

          .name{
            text-align: center;
          }
          .value{
            padding-left: 10px;
            font-size: 24px;
          }
          &.inner{
            top:40%;
            .value{
              font-size:24px;
            }
          }
        }
      }
      .count{
        margin: 25px 0;
        /* height: 120px; */
        /* line-height: 60px; */
        /* text-align: center; */
        border-left: 1px solid #c5c5c5;
        // .name{
        //   font-weight: bold;
        // }
        .value{
          font-size: 20px;
        }
      }
      .chart-wrap{
        // width: 60%;
        // float: left;
        #countChart{
          margin:0 20px;
          width:200px;
          height:200px;
          float: left;
          background: #fff;
        }
        ul{
          margin-top: 20px;
          float: left;
          width: calc(100% - 240px);
          li{
            width:50%;
            float:left;
            text-align:center;
            padding: 10px 0;
            box-sizing: border-box;
            .name{
              position: relative;
              color:@color_unit;
              margin-top: 10px;
            }
            .name::before{
              content: '';
              position: absolute;
              top: 11px;
              transform: translate(-14px,-50%);
              width: 10px;
              height: 10px;
              border-radius: 10px;
            }
            .status1::before{
              background: #7bc594;
            }
            .status4::before{
              background: #fdd001;
            }
            .status2::before{
              background: #ef708b;
            }
            .status3::before{
              background: #bdbdbd;
            }
          }
        }
      }


    }

    &.box-info{
      position:relative;
      padding-top:20px;
      .btn-refresh{
        position:absolute;
        left:10px;
        top:10px;
        font-size:12px;
        cursor:pointer;
        i{
          padding-right:5px;
          font-size:24px;
          vertical-align:middle;
        }
        span{
          vertical-align:middle;
        }
      }
      
      li{
        width: 33.3%;
        float: left;
        margin: 16px 0;
        box-sizing: border-box;
        text-align: center;
        border-right: 1px solid #c5c5c5;
        .name{
          margin-bottom: 11px;
          padding: 0 5px;
          font-weight:bold;
          font-size: 14px;
          color:#a1a6ae;
          .text-overflow();
          .icon-tag{
            font-weight:normal;
          }
        }
        .icon{
          display: inline-block;
          background: url(../../assets/img/overview_new/icon/month.png) no-repeat;
          background-size:100% 100% !important;
          width:55px;
          height:55px;
        }
        .value{
          font-size: 25px;
        }
        &.day{
          i{
            background: url(../../assets/img/overview_new/icon/day.png) no-repeat;
          }
          .text{
            color:#dfca64;
          }
        }
        &.month{
          i{
            background: url(../../assets/img/overview_new/icon/month.png) no-repeat;
          }
          .text{
            color:#8dbb71;
          }
        }
        &.year{
          i{
            background: url(../../assets/img/overview_new/icon/year.png) no-repeat;
          }
          .text{
            color:#7486a1;
          }
        }
        &.total{
          i{
            background: url(../../assets/img/overview_new/icon/total.png) no-repeat;
          }
          .text{
            color:#9c84a6;
          }
        }
        &.money{
          i{
            background: url(../../assets/img/overview_new/icon/money.png) no-repeat;
          }
          .text{
            color:#7fc3b9;
          }
        }
        &.co2{
          i{
            background: url(../../assets/img/overview_new/icon/co2.png) no-repeat;
          }
          .text{
            color:#72b5c1;
          }
        }
      }
      .on li{
        &.year,&.co2{
          border-right:none;
        }
      }
      .off li{
        width: 50%;
        &.month,&.total{
          border-right: none;
        }
        
      }

    }



    &.box-pv{
        overflow:visible;
        .moduleInfo {
          display: -webkit-flex;
          display: flex;
          padding-top: 40px;
          height: 249px;
          justify-content:center;
          font-size:14px;
        }
        .moduleInfo>li{
          position: relative;
          width:50%;
          text-align:center;
          .float-list{
            padding: 10px 20px;
            display: none;
            position: absolute;
            top: 50px;
            left: -145px;
            background: rgba(240, 240, 250, 0.9);
            font-size: 13px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            transform: translateY(-50%);
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
            transition: 0.5s;
            z-index: 4;
            &.pv{
              left:0;
            }
            li{
              padding: 8px 0;
              text-align: left;
              &:not(:last-child){
                border-bottom: 1px solid #dcdcdc;
              }
              .li-title{
                // font-weight:bold;
                margin-bottom:5px;
                span{
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background: #00bb65;
                  margin-left: 5px;
                }
                .status1{
                  background: #7bc594;
                }
                .status4{
                  background: #fdd001;
                }
                .status2{
                  background: #ef708b;
                }
                .status3{
                  background: #bdbdbd;
                }
              }
            }
          }
          
          .wrap:hover{
            .float-list{
              display:block;
            }
          }
        }
        .moduleInfo>li>div.wrap{
          display: inline-block;
        }
        .moduleInfo p{
          line-height:25px;
        }
        .moduleInfo p .value{
          color: #fc8920;
            font-size: 16px;
        }
        .moduleInfo p .unit{
          padding-left:2px;
          color: #8a8a8a;
          font-size: 12px;
        }
        .bmsCapation {
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          margin-top: -9px;
          font-size: 20px;
          color: #2b6500;
        }
        .moduleInfo>li img{
          width:150px;
        }
        .batteryStatus{
          margin: 2px 0;
          display: inline-block;
          width: 16px;
          height: 16px;
          vertical-align: text-top;
          border-radius: 50%;
        }
        .batteryStatus.gray{
          background:#999;
          background-image: radial-gradient(circle, #d0d0d0,#757575);
        }
        .batteryStatus.red{
          background:#f00;
          background-image: radial-gradient(circle, #ffb887,#f00);
        }
        .batteryStatus.green{
          background:#0f0;
          background-image: radial-gradient(circle, #a8fb38,#00a012);
        }
        .charge-status{
          display: inline-block;
          width: 10px;
          height: 20px;
          background-image: url(../../assets/img/overview/icon-charge.png);
          background-repeat: no-repeat;
          background-size: 20px 20px;
          background-position: 0 0;
          vertical-align: middle;
        }
        .charge-status.discharge{
          background-position:-10px 0;
        }

        .moduleInfo>li div.battery{
          padding:4px 18px 4px 4px;
          position:relative;
          width: 150px;
          height: 71px;
          left: 50%;
          margin-left: -75px;
          background: url(../../assets/img/overview/battery-bg.png);
          background-size: cover;
        }
        #batteryShow div.wrap{
          padding-top: 3%;
        }
        .bmsRer{
          height: 100%;
          width: 0;
          transition:.5s;
          background: #71d414;
          background: linear-gradient(45deg, #5bb900, #8cef2e);
          border-radius: 6px;
        }
        .icon-battery{
          display:none;
          position: absolute;
          top: 50%;
          right: 12%;
          width: 20px;
          height: 40px;
          transform: translateY(-50%);
          background-image: url(../../assets/img/overview/icon-charge.png);
          background-repeat:no-repeat;
          background-size:40px 40px;
          background-position:0 0;
        }
        .icon-battery.charge,.icon-battery.discharge{
          display:block;
        }
        .icon-battery.discharge{
          background-position:-20px 0;
        }
        
        
      }


    


    .flex-item{
      position: relative;
      margin: 10px 5px;
      height: 250px;
      background:@color_box_bg;
      border-radius: @border_radius;
      .title{
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: @border_bottom;
        color: @color_title;
      }

      .wrap-chart{
        position: absolute;
        width: 100%;
        height: max-content;
        top: 0;
        left: 0;
        background: #efefef;
        visibility: hidden;
        &.active{
          visibility:visible;
        }
      }
    }

    

    
  }
}

</style>